<template>
  <view class="index-container">
    <!-- #ifdef MP -->
    <!-- <u-navbar :is-back="false" background="transparent" :border-bottom="false"></u-navbar> -->
    <!-- #endif -->
    <!-- 轮播 -->
    <view class="banner-content">
      <IndexBanner></IndexBanner>
    </view>
    <!-- 公告 -->
    <view class="notice-content">
      <IndexNoticeBar></IndexNoticeBar>
    </view>

    <!-- 标点圈 -->
    <login-wrap>
      <view class="info-content">
        <view class="info-header flex jb ac">
          <view class="title-1">创作中心</view>
          <view class="title-2">助力短视频变现</view>
        </view>
        <view class="flex" style="margin-bottom: 32rpx;">
          <view class="map-item" @click="handlePublis('1')" >
            <view class="publis-content">
              <view class="left-container flex ac fw">
                <view class="title">图库创作中心</view>
                <view class="des">图库素材创作中心内含大量公共（头像、壁纸、表情包、背景图）素材，支持上传自己素材，收入来源主要靠广告和会员</view>
              </view>
              <image
                src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01SEvzt42BzNRCHIjdx_!!1888948409.png"
                mode="scaleToFill"
                class="fishing-publish-icon"
              />
            </view>
          </view>
        </view>

        <view class="flex">
          <view class="map-item" @click="handlePublis('2')">
            <view class="reset-btn publis-content publis-content-ShortCu">
              <view class="left-container flex ac fw">
                <view class="title">趣玩定制中心</view>
                <view class="des">定制中心内含大量公用壁纸、头像、照片、视频改字和视频配音等模板，支持自定义上传模板，收入主要来源于会员付费模式</view>
              </view>
              <image
                src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01bVr7Eu2BzNR9XVgwU_!!1888948409.png"
                mode="scaleToFill"
                class="fishing-publish-icon"
              />
            </view>
          </view>
        </view>

      </view>
    </login-wrap>
  </view>
</template>

<script>

  import { mapGetters } from 'vuex';
  import LoginWrap from '@/components/loginWrap/loginWrap.vue';
  import IndexBanner from '@/components/indexBanner/indexBanner.vue';
  import IndexNoticeBar from '@/components/indexNoticeBar/indexNoticeBar.vue';
  export default {
    components: {
      IndexBanner,
      IndexNoticeBar,
      LoginWrap
    },
    computed: {
      ...mapGetters([
        'userStatistics',
      ])
    },
    data() {
      return {
        activeAppletInfo: null,
        plateInfoData: {},
        artworksList: {
          data: [],
          pageSize: 20,
          pageNum: 1
        },
        showNoMoreFlag: false,
        noneMoreData: false,
      }
    },
    onShow() {
      this.artworksList.data = [];
      this.artworksList.pageNum = 1;
    },
    methods: {
      handlePublis(type) {
        uni.navigateTo({ url: `/pages/artworks/index?show_make=${type}` })
      }
    },
  }
</script>

<style lang="scss">

  .index-container ::v-deep .u-mode-center-box{
    background-color: transparent;
  }

  page{
    background-color: #f5f5f5;
  }
  .index-container{
    width: 100%;
    padding-top: 24rpx;

    .banner-content{
      margin-bottom: 32rpx;
      padding: 0 32rpx;
    }

    .notice-content{
      margin-bottom: 32rpx;
      padding: 0 32rpx;
    }

    .info-content{
      background-color: #fff;
      padding: 32rpx;
      border-radius: 16rpx;
      margin-bottom: 24rpx;
      border-radius: 16rpx;

      .info-header{
        font-size: 38rpx;
        font-weight: bold;
        margin-bottom: 32rpx;
      }

      .title-2{
        color: #dbd9e4;
        font-size: 28rpx;
      }

      .map-item{
        width: 100%;

        .publis-content{
          width: 100%;
          background-color: #e5effb;
          border-radius: 16rpx;
          position: relative;
          padding: 24rpx 128rpx 24rpx 24rpx;

          .fishing-publish-icon{
            position: absolute;
            right: 0;
            bottom: 0;
            width: 124rpx;
            height: 120rpx;
          }

          .left-container{
            position: relative;
            z-index: 1;

            .title{
              width: 100%;
              font-size: 34rpx;
              font-weight: bold;
              color: #4f9cf9;
              font-weight: bold;
              margin-bottom: 24rpx;
            }

            .des{
              font-size: 24rpx;
              color: #5b6c92;
            }
          }
        }

        .publis-content-ShortCu{
          background-color: #e2fcf6;

          .left-container{
            .title{
              color: #0cb898;
              text-align: left;
            }

            .des{
              color: #408480;
              text-align: left;
            }
          }
        }
      }

      .empty-image{
        width: 576rpx;
        height: 528rpx;
      }
    }
  }

  .ks-model-container{
    width: 588rpx;
    border-radius: 16rpx;
    overflow: hidden;
    // background-color: #fff;

    .model-content{
      width: 588rpx;
      height: 1066rpx;
      background-image: url(https://res.guxitk.com/2023/07/15/20230715145654-20230715145554.png);
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
    }

    .wechat-qrcode{
      position: absolute;
      width: 320rpx;
      height: 320rpx;
      top: 586rpx;
      left: 0;
      right: 0;
      margin: auto;
      border-radius: 8rpx;
    }

    .close-icon{
      padding: 0 24rpx;
      display: flex;
      justify-content: center;
    }
  }
  .guid-icon{
    width: 118rpx;
    height: 118rpx;
    border-radius: 50%;
    position: fixed;
    right: 24rpx;
    bottom: 180rpx;
    animation: btnMove 1s infinite;
  }

  @-webkit-keyframes btnMove {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.1);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes btnMove {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.1);
    }

    100% {
      transform: scale(1);
    }
  }
</style>
